<script>
export default {
    props: ['btname'],
    methods: {
        click() {
            alert(this.btname)
        },
        // 父组件调用子组件的方法
        // this.$refs.button.click()
        // this.$refs.button.innerClick()
        innerClick() {
            this.$emit('innerClick', '带代了一个参数')
        },
        testClick() {
            let that = this
            that.testMsg = '修改后的值'
            //console.log(that.$refs.aa.innerText) //that.$refs.aa获取指定DOM，输出：原始值
            // $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
            that.$nextTick(() => {
                console.log(that.$refs.aa.innerText) //that.$refs.aa获取指定DOM，输出：修改后的值
            })
        }
    },
    data() {
        return {
            testMsg: '原始值'
        }
    },
    created() {
        let that = this
        console.log(that.$refs.aa.innerText)
        // that.$nextTick(function () {
        //     //不使用this.$nextTick()方法会报错
        //     that.$refs.aa.innerHTML = 'created中更改了按钮内容' //写入到DOM元素
        // })
    }
}
</script>
<template>
    <div>
        <div class="button" @click="click">{{ btname }}</div>
        <div class="button-inner" @click="innerClick">向父组件传递值</div>
        <div>
            <button id="firstBtn" @click="testClick" ref="aa">
                this.$nextTick()的使用{{ testMsg }}
            </button>
        </div>
    </div>
</template>
<style>
.button {
    width: 100px;
    height: 100px;
    background: red;
}
.button-inner {
    width: 100px;
    height: 100px;
    background: blue;
}
</style>
